<!-- Copyright 2016 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<link rel="import" href="./welcome_dialog.html">
<link rel="import" href="../../cr_ui.html">
<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/oobe_i18n_dropdown.html">
<link rel="import" href="../../components/oobe_select.html">
<link rel="import" href="../../components/oobe_types.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_modal_dialog.html">

<dom-module id="oobe-welcome-element">
  <template>
    <style include="oobe-dialog-host-styles">
      :host {
        --oobe-dialog-list-item-border: 1px solid var(--google-grey-200);
        --oobe-a11y-dialog-list-item-border: 1px solid var(--google-grey-200);
        color: var(--oobe-text-color);
        font-family: var(--oobe-default-font-family);
        font-size: var(--oobe-default-font-size);
        font-weight: var(--oobe-default-font-weight);
        line-height: var(--oobe-default-line-height);
      }

      /************* Language Screen **************/
      #languageScreen .language-selection-entry {
        border-top: var(--oobe-dialog-list-item-border);
        min-height: var(--selection-entry-height);
      }

      #languageScreen .language-selection-entry:last-of-type {
        border-bottom: var(--oobe-dialog-list-item-border);
      }

      /************* Accessibility Screen **************/
      #accessibilityScreen oobe-a11y-option {
        border-top: var(--oobe-a11y-dialog-list-item-border);
        min-height: var(--a11y-option-height);
      }

      #accessibilityScreen oobe-a11y-option:last-of-type {
        border-bottom: var(--oobe-a11y-dialog-list-item-border);
      }

      /************* Timezone Screen **************/
      #timezoneScreen .timezone-selection-entry {
        border-top: var(--oobe-dialog-list-item-border);
        min-height: var(--selection-entry-height);
      }

      #timezoneScreen .timezone-selection-entry:last-of-type {
        border-bottom: var(--oobe-dialog-list-item-border);
      }

      /************* Advanced Options screen **************/
      #oobeAdvancedOptionsScreen .advanced-options-entry {
        border-top: var(--oobe-dialog-list-item-border);
        min-height: 64px;
      }

      #oobeAdvancedOptionsScreen .advanced-options-entry:last-of-type {
        border-bottom: var(--oobe-dialog-list-item-border);
      }

      #oobeAdvancedOptionsScreen .advanced-option-subtitle {
        color: var(--google-grey-700);
      }
    </style>
    <oobe-welcome-dialog id="welcomeScreen" role="dialog" for-step="greeting"
        aria-label$="[[i18nDynamic(locale, 'welcomeScreenGreeting')]]"
        current-language="[[currentLanguage]]"
        on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
        on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
        on-timezone-button-clicked="onWelcomeTimezoneButtonClicked_"
        on-next-button-clicked="onWelcomeNextButtonClicked_"
        on-quick-start-clicked="onQuickStartButtonClicked_"
        on-enable-debugging-clicked="onEnableDebuggingClicked_"
        on-launch-advanced-options="onWelcomeLaunchAdvancedOptions_"
        on-chromevox-hint-accepted="onChromeVoxHintAccepted_"
        on-chromevox-hint-dismissed="onChromeVoxHintDismissed_"
        timezone-button-visible=
            "[[isTimezoneButtonVisible_(highlightStrength)]]"
        debugging-link-visible="[[debuggingLinkVisible_]]">
    </oobe-welcome-dialog>
    <oobe-adaptive-dialog id="languageScreen" role="dialog" for-step="language"
        aria-label$="[[i18nDynamic(locale, 'languageSectionTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:language"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'languageSectionTitle')]]
      </h1>
      <p slot="subtitle">
        <template is="dom-if" if="[[shouldShowLanguageSectionSubtitle_]]">
          [[i18nDynamic(locale, 'languageSectionHint')]]
          <a id="languagesLearnMore" class="oobe-local-link" is="action-link"
              on-click="onLanguageLearnMoreLinkClicked_">
            [[i18nDynamic(locale, 'learnMore')]]
          </a>
        </template>
      </p>
      <div id="setup-container" slot="content" class="landscape-header-aligned">
        <div id="languageDropdownContainer"
            class="flex layout center horizontal justified
                language-selection-entry">
          <div id="language-dropdown">
            [[i18nDynamic(locale, 'languageDropdownTitle')]]
          </div>
          <oobe-i18n-dropdown id="languageSelect" items="[[languages]]"
              on-select-item="onLanguageSelected_" class="focus-on-show"
              label-for-aria=
                  "[[i18nDynamic(locale, 'languageDropdownLabel')]]">
          </oobe-i18n-dropdown>
        </div>
        <div id="keyboardDropdownContainer"
            class="flex layout center horizontal justified
               language-selection-entry">
          <div id="keyboard-dropdown">
            [[i18nDynamic(locale, 'keyboardDropdownTitle')]]
          </div>
          <oobe-i18n-dropdown id="keyboardSelect" items="[[keyboards]]"
              on-select-item="onKeyboardSelected_"
              label-for-aria=
                  "[[i18nDynamic(locale, 'keyboardDropdownLabel')]]">
          </oobe-i18n-dropdown>
        </div>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="ok-button-language" text-key="oobeOKButtonText"
            inverse on-click="closeLanguageSection_"></oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-adaptive-dialog id="accessibilityScreen" role="dialog"
        for-step="accessibility"
        aria-label$="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:accessibility"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'accessibilitySectionTitle')]]
      </h1>
      <p slot="subtitle">
        [[i18nDynamic(locale, 'accessibilitySectionHint')]]
      </p>
      <div slot="content" class="layout vertical">
        <oobe-a11y-option id="accessibility-spoken-feedback"
            checked="[[a11yStatus.spokenFeedbackEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'spokenFeedbackOption')]]"
            class="focus-on-show">
          <span slot="title">
            [[i18nDynamic(locale, 'spokenFeedbackOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-large-cursor"
            checked="[[a11yStatus.largeCursorEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'largeCursorOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'largeCursorOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'largeCursorOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'largeCursorOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-high-contrast"
            checked="[[a11yStatus.highContrastEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'highContrastOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'highContrastOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-screen-magnifier"
            checked="[[a11yStatus.screenMagnifierEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'screenMagnifierOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'screenMagnifierOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-select-to-speak"
            checked="[[a11yStatus.selectToSpeakEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'selectToSpeakOption')]]"
            id="selectToSpeakOobeOption">
          <span slot="title">
            [[i18nDynamic(locale, 'selectToSpeakOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-docked-magnifier"
            checked="[[a11yStatus.dockedMagnifierEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'dockedMagnifierOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'dockedMagnifierOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-virtual-keyboard"
            checked="[[a11yStatus.virtualKeyboardEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'virtualKeyboardOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'virtualKeyboardOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="ok-button-accessibility"
            text-key="oobeOKButtonText" inverse
            on-click="closeAccessibilitySection_"></oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-adaptive-dialog id="timezoneScreen" role="dialog" for-step="timezone"
        aria-label$="[[i18nDynamic(locale, 'timezoneSectionTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:timezone"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'timezoneSectionTitle')]]
      </h1>
      <div slot="content" class="landscape-header-aligned">
        <div class="flex layout center horizontal justified
              timezone-selection-entry">
          <div>
            [[i18nDynamic(locale, 'timezoneDropdownTitle')]]
          </div>
          <oobe-i18n-dropdown id="timezoneSelect" items="[[timezones]]"
              on-select-item="onTimezoneSelected_"
              label-for-aria="[[i18nDynamic(locale, 'timezoneDropdownLabel')]]"
              class="focus-on-show">
          </oobe-i18n-dropdown>
        </div>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="ok-button-timezone" text-key="oobeOKButtonText"
            inverse on-click="closeTimezoneSection_"></oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-adaptive-dialog id="oobeAdvancedOptionsScreen" role="dialog"
        for-step="advanced-options"
        aria-label$="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:gear"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]
      </h1>
      <div slot="content" class="landscape-header-aligned">
        <div class="flex layout vertical center-justified
            advanced-options-entry">
          <button on-click="onCFMBootstrappingClicked_">
            <div>
              [[i18nDynamic(locale, 'advancedOptionsCFMSetupTitle')]]
            </div>
            <div class="advanced-option-subtitle">
              [[i18nDynamic(locale, 'advancedOptionsCFMSetupSubtitle')]]
            </div>
          </button>
        </div>
        <div class="flex layout vertical center-justified
            advanced-options-entry">
          <button on-click="onDeviceRequisitionClicked_">
            <div>
              [[i18nDynamic(locale, 'advancedOptionsDeviceRequisitionTitle')]]
            </div>
            <div class="advanced-option-subtitle">
              [[i18nDynamic(locale, 'advancedOptionsDeviceRequisitionSubtitle')]]
            </div>
          </button>
        </div>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="ok-button-advanced-options"
            text-key="oobeOKButtonText" inverse
            on-click="closeAdvancedOptionsSection_"></oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
    <!-- Demo Mode confirmation dialog -->
    <oobe-modal-dialog id="demoModeConfirmationDialog">
      <div slot="title">
        [[i18nDynamic(locale, 'enableDemoModeDialogTitle')]]
      </div>
      <div slot="content">
        [[i18nDynamic(locale, 'enableDemoModeDialogText')]]
      </div>
      <div slot="buttons">
        <oobe-text-button id="cancelButton" border
            on-click="onDemoModeDialogCancelTap_"
            text-key="enableDemoModeDialogCancel"></oobe-text-button>
        <oobe-text-button inverse on-click="onDemoModeDialogConfirmTap_"
            id="okButton"
            text-key="enableDemoModeDialogConfirm"></oobe-text-button>
      </div>
    </oobe-modal-dialog>

    <!-- Remora requisition dialog -->
    <oobe-modal-dialog id="remoraRequisitionDialog">
      <div slot="title">
        [[i18nDynamic(locale, 'deviceRequisitionRemoraPromptText')]]
      </div>
      <div slot="buttons">
        <oobe-text-button border on-click="onRemoraCancel_"
            text-key="deviceRequisitionRemoraPromptCancel"></oobe-text-button>
        <oobe-text-button inverse on-click="onRemoraConfirm_"
            text-key="deviceRequisitionRemoraPromptOk"></oobe-text-button>
      </div>
    </oobe-modal-dialog>

    <!-- Edit requisition dialog -->
    <oobe-modal-dialog id="editRequisitionDialog">
      <div slot="title">
        [[i18nDynamic(locale, 'deviceRequisitionPromptText')]]
      </div>
      <cr-input id="editRequisitionInput" slot="content"
          placeholder="[[i18nDynamic(locale,
              'advancedOptionsDeviceRequisitionTitle')]]">
      </cr-input>
      <div slot="buttons">
        <oobe-text-button border on-click="onEditRequisitionCancel_"
            text-key="deviceRequisitionPromptCancel"></oobe-text-button>
        <oobe-text-button inverse on-click="onEditRequisitionConfirm_"
            text-key="deviceRequisitionPromptOk"></oobe-text-button>
      </div>
    </oobe-modal-dialog>
  </template>
  <script src="welcome.js"></script>
</dom-module>
